<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/art-template/lib/template-web.js"></script>
  <!-- <script src="/node_modules/axios/lib/axios.js"></script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <title>英雄联盟</title>
</head>
<style>
  body{
    background: url('/assets/images/timg.jpg');
    color: #fff;
    background-size: cover;
  }
  a{
    text-decoration:none;
    color: #fff!important;
  }
  .info{
    position: fixed;
    top: 300px;
    left: 80px;
    border: 1px solid #fff;
    padding: 10px 40px;
    width: 80px;
    height: 380px;
  }
</style>

<body>
  <div class="info">
    提示  ：由于权限文件暂时不支持删除  ！
  </div>
  <div class="container">
    <h1 class="text-center">英雄联盟<small>英雄列表</small></h1>
    <!-- 表格部分 -->
    <hr>
    <div class="">
      <a href="add.html" class="btn btn-success pull-right" style="margin:10px 0">添加英雄</a>
    </div>
    <table class="table table-bordered">
      <thead>
        <th>编号</th>
        <th>名字</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>操作</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <!-- 模板操作的数据 -->
  <script id="tmp" type="text/html">
    {{ each message }}
         <tr>
             <td>{{ $value.id}}</td>
             <td>{{ $value.name }}</td>
             <td>{{ $value.gender }}</td>
             <td>{{ $value.ctime }}</td>
             <td> 
              <a href="read.html?id={{$value.id}}">查看</a>
              <a href="editer.html?id={{$value.id}}">编辑</a>
              <!-- <a href="http://127.0.0.1:5000/api/deletehero?id={{ $value.id }} " target="_blank" >删除</a> -->
             </td>
         </tr>
      {{ /each }}
    </script>
  <script>
    $(function () {
      // console.log('ok')
      // 发送ajax 请求 
      //  $.ajax({
      //      url:'http://127.0.0.1:5000/api/getheros',
      //      type:'get',
      //      success:(res) =>{
      //          // console.log(res)
      //        const htmlStr = template('tmp',res)
      //        $("tbody").html(htmlStr)
      //      },
      //      error: (err) =>{
      //          console.log(err)
      //      }
      //  })
      //  使用axios 方式发送请求 
      axios.get('http://127.0.0.1:5000/api/getheros')
        .then(function (res) {
          const htmlStr = template('tmp', res.data)
          $("tbody").html(htmlStr)
        })
        .catch(function (err) {
          console.log(err)
        })



    })
  </script>
</body>

</html>